<!--
 * @Author: WangGuojian 1085844536@qq.com
 * @Date: 2023-07-22 23:12:30
 * @LastEditTime: 2023-07-22 23:17:44
 * @LastEditors: WangGuojian 1085844536@qq.com
 * @FilePath: \vue-basic\04-el与data的两种写法\el与data的两种写法.html
 * @Description:
-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>el与data的两种写法</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--
            data与el的2种写法
                1.el有2种写法
                    (1).new Vue 时候配置 el 属性。
                    (2).先创建 Vue 实例,随后再通过 vm.$mount('#root')指定el的值
                2.data有2种写法
                    (1).对象式
                    (2).函数式
                    如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
                3.一个重要的原则：
                    由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
         -->
        <!-- 准备好一个容器 -->
        <div id="root">
            <h1>你好,{{name}}</h1>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false;

        // el 的两种写法
        // const v = new Vue({
        //     // el: '#root', // 第一种写法
        //     data: {
        //         name: '尚硅谷',
        //     },
        // });
        // console.log(v);

        // v.$mount('#root'); // 第二种写法
        new Vue({
            el: '#root',
            // data 的第一种写法：对象式
            //     data: {
            //         name: '尚硅谷',
            //     },

            // data 的第二种写法：函数式
            data() {
                console.log('@@@', this);
                return {
                    name: '尚硅谷',
                };
            },
        });
    </script>
</html>
